import Sty from "../../style/square/index.module.css";
import { NavBar, Space } from 'antd-mobile'
import { SearchOutline } from 'antd-mobile-icons'
import { Tabs, Badge } from 'antd-mobile'
import Amoy from "./childrenViews/Amoy";
import Topic from "./childrenViews/Topic"
import Welfare from "./childrenViews/Welfare"
import { useHistory } from "react-router";




const Index = (props: any) => {
  let history = useHistory()
  const navBarRight = (
    <div style={{ fontSize: 18 }}>
      <Space>
        <SearchOutline onClick={() => history.push("/squaresearch")} />
      </Space>
    </div>
  )
  return <div className={Sty.square_box}>

    <div className={Sty.square_b_title}>
      <div className={Sty.top}>
        <NavBar backArrow={false} right={navBarRight}>
          广场
        </NavBar>
      </div>
      {/* top栏 */}
      <div className={Sty.bigTab}>
        <Tabs activeLineMode={'full'} defaultActiveKey={'Amoy'}>
          <Tabs.Tab title='淘货' key='Amoy'>
            <Amoy />
            {/* 组件一 */}
          </Tabs.Tab>
          <Tabs.Tab title='话题' key='Topic'>
            <Topic />
            {/* 组件二 */}
          </Tabs.Tab>
          <Tabs.Tab title='公益' key='Welfare'>
            <Welfare />
            {/* 组件三 */}
          </Tabs.Tab>
        </Tabs>
      </div>
      {/* bigTab */}

    </div>

  </div>

}
export default Index;